<template>
	<tabBar :currentPage="4"></tabBar>
	<view class="one">

	</view>
	<view class="wapper">
		<view class="profile">
			<view class="top">
				<view class="tou">
					<image style="height: 100%;width:100%" v-if="isLogin && profile.sex == '男'"
						src="../../../static/image/头像 男孩.png" mode=""></image>
					<image v-if="isLogin && profile.sex == '女'" src="../../../static/image/头像 女孩.png" mode=""></image>
					<image v-if="!isLogin" src="../../../static/icons/我的.png" mode=""></image>
				</view>
				<view v-show="!isLogin" class="zhu">
					<text @click="goLogin()">登录</text>
					<text>/</text>
					<text @click="uni.navigateTo({ url: '/pages/login/register' })">注册</text>
				</view>
				<view v-show="isLogin" class="zhu">
					<text style="font-size: 35rpx;">{{ profile.name }}</text>

				</view>
			</view>

			<view class="floot">
				<view class="box" @click="goHouse">
					<view class="num">2</view>
					<view class="text">
						房屋
					</view>
				</view>
				<view class="box" @click="goStall()">
					<view class="num">4</view>
					<view class="text">
						车位
					</view>
				</view>
				<view class="box">
					<view class="num">2</view>
					<view class="text">
						代缴费
					</view>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="list">
				<view class="item" @click="goFaceRecognition()">
					<view class="left">
						<image src="../../../static/icons/人脸识别.png" mode=""></image>
						<text>人脸识别通行</text>
					</view>
					<view class="right">
						<text>未开启</text>
						<image src="../../../static/icons/向右.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="goMember()">
					<view class="left">
						<image src="../../../static/icons/家庭成员.png" mode=""></image>
						<text>家庭成员管理</text>
					</view>
					<view class="right">
						<text></text>
						<image src="../../../static/icons/向右.png" mode=""></image>
					</view>
				</view>

				<view class="item" @click="goSuggest()">
					<view class="left">
						<image src="../../../static/icons/建议.png" mode=""></image>
						<text>我的投诉建议</text>
					</view>
					<view class="right">
						<text></text>
						<image src="../../../static/icons/向右.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="goRepair()">
					<view class="left">
						<image src="../../../static/icons/保修.png" mode=""></image>
						<text>我的报修</text>
					</view>
					<view class="right">
						<text></text>
						<image src="../../../static/icons/向右.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="goVisitor()">
					<view class="left">
						<image src="../../../static/icons/访客足迹.png" mode=""></image>
						<text>我的访客</text>
					</view>
					<view class="right">
						<text></text>
						<image src="../../../static/icons/向右.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="goWaterElectric()">
					<view class="left">
						<image src="../../../static/icons/统计.png" mode=""></image>
						<text>我的水/电/燃气使用量</text>
					</view>
					<view class="right">
						<text></text>
						<image src="../../../static/icons/向右.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="goSet()">
					<view class="left">
						<image src="../../../static/icons/设置.png" mode=""></image>
						<text>设置</text>
					</view>
					<view class="right">
						<text></text>
						<image src="../../../static/icons/向右.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="loginOut" @click="goLogin()">
			<text>退出</text>
		</view>
		<view style="height: 200rpx;"></view>
	</view>

</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from '/axios/axios.js'
let isLogin = ref(false)
let profile = ref({})
onMounted(() => {
	// 首先判断是否登录
	axios.post('/profile').then(res => {
		console.log(res);
		if (res.status == 200) {
			// 获取用户信息成功
			isLogin.value = true
			profile.value = res.data.user
		} else {
			// 获取用户信息成功
			isLogin.value = false
		}
	}).catch(err => {
		console.log(err);
	})
})


// 去登录
function goLogin() {
	// 删除本地缓存
	uni.removeStorageSync('token')
	// 跳转到登录页面
	uni.navigateTo({ url: '/pages/login/login' })
}

// 去我的房屋页面
function goHouse() {
	uni.navigateTo({ url: '/pages/house/house' })
}
// 去我的车位
function goStall() {
	uni.navigateTo({ url: '/pages/stall/stall' })
}
// 人脸识别
function goFaceRecognition() {
	uni.navigateTo({ url: '/pages/face/face' })
}
// 去家庭成员管理
function goMember() {
	uni.navigateTo({ url: '/pages/member/member' })
}
// 去投诉建议
function goSuggest() {
	uni.navigateTo({ url: '/pages/suggest/suggest' })
}
// 去报修
function goRepair() {
	uni.navigateTo({ url: '/pages/repairs/repairs' })
}
// 去访客
function goVisitor() {
	uni.navigateTo({ url: '/pages/visitor/visitor' })
}
// 去水电气使用量页面
function goWaterElectric() {
	uni.navigateTo({ url: '/pages/waterElectric/waterElectric?index=0' })
}
// 去设置页面
function goSet() {
	uni.navigateTo({ url: '/pages/set/set' })
}


// 
</script>

<style lang="scss">
.one {
	height: 500rpx;
	background-image: url('https://cdn7.axureshop.com/demo/1996612/images/%E6%88%91%E7%9A%84/u10568.png');
	background-size: cover;
}

.wapper {
	background-color: rgb(245, 245, 245);
	padding: 40rpx;
	height: calc(100vh - 291rpx);

	.profile {
		box-shadow: 0rpx 0rpx 3rpx 3rpx #cccccc;
		height: 300rpx;
		// background-repeat: no-repeat;
		background-color: rgb(253, 253, 253);
		border-radius: 10rpx;
		margin-top: -150rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;

		.tou {
			height: 150rpx;
			width: 150rpx;
			border-radius: 50%;
			background-color: rgb(255, 255, 255);
			// background-color: aquamarine;
			box-shadow: 0rpx 0rpx 5rpx 5rpx #cccccc;
			margin-top: -75rpx;
			text-align: center;
			line-height: 150rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				vertical-align: middle;
			}
		}

		.zhu {
			font-size: 28rpx;
			text-align: center;
			margin-top: 15rpx;
		}

		.floot {
			height: 160rpx;
			// background-color: aqua;
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.box {
				text-align: center;

				.num {
					font-size: 70rpx;
					color: rgb(85, 85, 85);
					// background-color: blue;
				}

				.text {
					font-size: 30rpx;
				}
			}
		}
	}

	.main {
		box-shadow: 0rpx 0rpx 3rpx 3rpx #cccccc;
		margin-top: 50rpx;

		.list {
			.item {
				line-height: 100rpx;
				border-bottom: 2rpx solid #cccccc;
				background-color: rgb(255, 255, 255);
				padding: 5rpx 30rpx;
				display: flex;
				justify-content: space-between;

				text {
					font-size: 26rpx;
					color: rgb(89, 89, 89);
				}

				.left {
					image {
						height: 40rpx;
						width: 40rpx;
						vertical-align: middle;
						background-color: rgb(255, 255, 255);
						margin-right: 20rpx;
					}
				}

				.right {
					image {
						height: 40rpx;
						width: 40rpx;
						margin-left: 10rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}

	.loginOut {
		height: 80rpx;
		margin-top: 60rpx;
		background-color: rgb(255, 255, 255);
		text-align: center;
		line-height: 80rpx;
		border-radius: 50rpx;
		border: 3rpx solid #cccccc;
		font-size: 26rpx;
		color: #565656;
	}
}
</style>